<template>
	<view>
		<filter
			:searchTxt="searchTxt"
			:fieldsArr="fieldsArr"
			:fieldsIndex="fieldsIndex"
			:sexArr="sexArr"
			:sexIndex="sexIndex"
			:fwsLevelArr="fwsLevelArr"
			:fwsLevelIndex="fwsLevelIndex"
			@goSearch="goSearch"
			@delSearchTxt="delSearchTxt"
			@bindFieldsFilter="bindFieldsFilter"
			@bindSexFilter="bindSexFilter"
			@bindFwsLevelFilter="bindFwsLevelFilter"
			@goFilter="goFilter"
		/>
		<block v-if="isHasDataFlag == true">
			<zxs-list :zxsList="zxsList" @goZxsDet="goZxsDet"></zxs-list>
			<loading-view :loading="loading"></loading-view>
		</block>
		<block v-else-if="isHasDataFlag == false">
			<no-data></no-data>
		</block>
		<uni-drawer :visible="showRight" mode="right" :isHadFlDataFlag="true" @close="closeDrawer">
			<scroll-view class="scrollView" scroll-y>
				<view class="zxsFilter">
					<view class="zxsFilterItem">
						<view class="filterTit">擅长人群</view>
						<view class="filterList">
							<view class="item"
								:class="[personIndex == index ? 'active' : '']"
								v-for="(item,index) in personArr"
								:key="index"
								@tap="selectPersons(index,item.name)"
							>{{item.name}}</view>
						</view>
					</view>
					<view class="zxsFilterItem">
						<view class="filterTit">咨询风格</view>
						<view class="filterList">
							<view class="item"
								:class="[zxStyleIndex == index ? 'active' : '']"
								v-for="(item,index) in zxStyleArr"
								:key="index"
								@tap="selectZxStyle(index)"
							>{{item.name}}</view>
						</view> 
					</view>
					<view class="zxsFilterItem">
						<view class="filterTit">咨询流派</view>
						<view class="filterList">
							<view class="item"
								:class="[zxlpIndex == index ? 'active' : '']"
								v-for="(item,index) in zxlpArr"
								:key="index"
								@tap="selectZxLp(index)"
							>{{item.name}}</view>
						</view> 
					</view>
				</view>
				<view class="filterBtn">
					<view class="btn reset" @tap="resetFilter">重置</view>
					<view class="btn" @tap="sureFilter">确定</view>
				</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	import Filter from './components/Filter.vue'
	import ZxsList from './components/ZxsList.vue'
	import { getZzCenterZxsList } from '@/api/index/index'
	import { getFields,getPersons } from '@/api/xlzx/index'
	export default {
		components:{
			Filter,
			ZxsList
		},
		data() {
			return {
				searchTxt:'请输入咨询师姓名',
				isRefreshFlag:false,
				sexArr:[{name:'性别(不限)',id:''},{name:'男',id:'男'},{name:'女',id:'女'}],
				sexIndex:0,
				sexVal:'',
				fieldsArr:[{lyName:'咨询领域',id:''}],
				fieldsIndex:0,
				fieldsVal:'',
				personArr:[{name:'全部',id:''}],
				personIndex:0,
				personVal:'',
				fwsLevelArr:[{name:'服务师(不限)',val:0},{name:'初级',val:1},{name:'中级',val:2},{name:'高级',val:3}],
				fwsLevelIndex:0,
				fwsLevlVal:0,
				zxStyleArr:[
					{name:'全部'},{name:'温暖'},{name:'抱持'},{name:'沉稳'},{name:'耐心'},{name:'温和而坚定'},{name:'温和而真诚'},
					{name:'深刻有力'},{name:'真实'},{name:'清晰'},{name:'简洁'},{name:'赋能'},{name:'富于创造性'},
					{name:'专业'},{name:'深入'}
				],
				zxStyleVal:'',
				zxStyleIndex:0,
				zxlpArr:[
					{name:'全部'},
					{name:'精神分析类'},
					{name:'行为疗法类'},
					{name:'人本主义类'},
					{name:'其他'}
				],
				zxlpIndex:0,
				zxlpVal:'',
				showRight:false,
				zxsList:[],
				nowPage:1,
				hasNextFlag:null,
				loading : false,
				isHasDataFlag:null
			}
		},
		onLoad(){
			this.loadFields();
			this.loadPersons();
			this.getZxsList();
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline'],
			})
		},
		onShow(){
			if(this.isRefreshFlag){
				this.initParams();
			}
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		onPullDownRefresh : function(){
			this.initParams();
			uni.stopPullDownRefresh();
		},
		onReachBottom : function(){
			if( !this.loading && this.hasNextFlag ){
				this.getZxsList(); 
			}
		},
		methods: {
			getZxsList(){
				let { nowPage,zxsList } = this;
				this.loading = true;
				var realName = this.searchTxt == '请输入咨询师姓名' ? '' : this.searchTxt;
				var field = {realName:realName,sex:this.sexVal,serviceLevel:this.fwsLevlVal,scRange:this.fieldsVal,scCrowd:this.personVal,zxLevel:0,zxlp:this.zxlpVal,
								zxfg:this.zxStyleVal,page:this.nowPage,limit:this.limit };
				//console.log(field)
				getZzCenterZxsList(field).then(res=>{
					//console.log(res)
					this.hasNextFlag = res.data.hasNext;
					nowPage += 1;
					zxsList.push( ...res.data.datas );
					this.zxsList = zxsList;
					this.nowPage = nowPage;
					this.loading = false;
					this.isHasDataFlag = true;
				}).catch(err=>{
					//console.log(err)
					this.loading = false;
					this.isHasDataFlag=false;
				});
			},
			goZxsDet(workerId){
				uni.navigateTo({
					url:'/pages/subZx/zxsDet/zxsDet?workerId=' + workerId
				})
			},
			//加载领域
			loadFields(){
				var field = { parentId:0,showStatus:1 };
				getFields(field).then(res=>{
					var tmpData = res.data.datas;
					for(var i=0;i<tmpData.length;i++){
						this.fieldsArr.push(tmpData[i]);
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			loadPersons(){
				var field = { showStatus:1 };
				getPersons(field).then(res=>{
					var tmpData = res.data.datas;
					for(var i=0;i<tmpData.length;i++){
						this.personArr.push(tmpData[i]);
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			initParams(){
				this.nowPage = 1;
				this.loading = false;
				this.zxsList = [];
				this.getZxsList();
			},
			//咨询领域
			bindFieldsFilter(index){
				this.fieldsIndex = index;
				this.fieldsVal = this.fieldsArr[index].id;
				this.initParams();
			},
			bindSexFilter(index){
				this.sexIndex = index;
				this.sexVal = this.sexArr[index].id;
				this.initParams();
			},
			bindFwsLevelFilter(index){
				this.fwsLevelIndex = index;
				this.fwsLevlVal = this.fwsLevelArr[index].val;
				this.initParams();
			},
			//选择咨询风格
			selectZxStyle(index){
				this.zxStyleIndex = index;
				this.zxStyleVal = this.zxStyleArr[index].name == '全部' ? '' : this.zxStyleArr[index].name;
			},
			//选择咨询流派
			selectZxLp(index){
				this.zxlpIndex = index;
				this.zxlpVal = this.zxlpArr[index].name == '全部' ? '' : this.zxlpArr[index].name;
			},
			//选择擅长人群
			selectPersons(index,id){
				this.personIndex = index;
				this.personVal = id == '全部' ? '' : id;
			},
			goFilter() {
				this.showRight = true;
			},
			closeDrawer() {
				this.showRight = false;
			},
			sureFilter(){
				this.showRight = false;
				this.initParams();
			},
			resetFilter(){
				this.personIndex = 0;
				this.personVal = '';
				this.zxStyleIndex = 0;
				this.zxStyleVal = '';
				this.zxlpIndex = 0;
				this.zxlpVal = '';
				this.showRight = false;
				this.initParams();
			},
			goSearch(){
				uni.navigateTo({
					url:"/pages/subZx/search/search?searchType=zxsSearch"
				})
			},
			delSearchTxt(){
				this.searchTxt = '请输入咨询师姓名';
				this.initParams();
			},
		}
	}
</script>

<style lang="scss">
	.applyQxPop{
		width: 600rpx;
		height: 300rpx;
		background: #fff;
		border-radius: 20rpx;
		color: $pss-text-color3;
		.applyTit{
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
		}
		.applyCon{
			height: 130rpx;
			padding: 0 30rpx;
			color: $pss-text-color8;
			font-size: 28rpx;
			display: flex;
			align-items: center;
		}
		.applyBtn{
			height: 90rpx;
			border-top: 1rpx solid #eee;
			display: flex;
			.btnItem{
				flex: 1;
				text-align: center;
				line-height: 90rpx;
				font-size: 30rpx;
				color: $pss-text-color8;
				&:first-child{
					border-right: 1rpx solid #eee;
				}
				&:last-child{
					color: $pss-color-primary_1;
				}
			}
		}
	}
	.scrollView{
		width: 100%;
		height: 100%;
		--parHei:80rpx;
		.zxsFilter {
			padding:0 20rpx;
			overflow: hidden;
			background: #fff;
			overflow-y: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: var(--parHei);
			.zxsFilterItem.hasMargTop{
				margin-top: -66rpx; 
			}
			.filterTit{
				font-size: $font-size32;
				color: $pss-text-color3;
				font-weight: bold;
				height: 80rpx;
				line-height: 80rpx;
			}
			.filterList{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.item{
					width: 32%;
					height: 60rpx;
					line-height: 60rpx; 
					border-radius: 50rpx;
					text-align: center;
					flex-shrink: 0;
					font-size: $font-size24;
					color: $pss-text-color8; 
					background: #f4f4f4;
					margin-bottom: 20rpx;
					&.active{
						color: #fff;
						background: $pss-color-blueDeep;
					}
				}
				&:after{
					content: '';
					display: block;
					width: 32%;
					height: 66rpx;
				}
			}
		}
		.filterBtn{
			width: 100%;
			height:var(--parHei);
			position: fixed;
			left: 0;
			bottom: 0;
			background: $pss-color-blueDeep;
			display: flex;
			.btn{
				flex: 1;
				text-align: center;
				line-height: var(--parHei);
				font-size: 30rpx;
				color: #fff;
				&.reset{
					background:#f2f8ff;
					color: $pss-color-blue-light;
				}
			}
		}
	}
</style>
